"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue = require("vue");
const antDesignVue = require("ant-design-vue");
const index = require("../empty/index.cjs");
require("../icons/index.cjs");
const tree = require("../../utils/tree.cjs");
const lodashEs = require("lodash-es");
require("../tree-search/tree-list.vue.cjs");
const treeList_vue_vue_type_script_setup_true_lang = require("../tree-search/tree-list.vue2.cjs");
const closeIcon = require("../icons/close-icon.vue.cjs");
const downIcon = require("../icons/down-icon.vue.cjs");
const searchIcon = require("../icons/search-icon.vue.cjs");
const closeCircleFilledIcon = require("../icons/close-circle-filled-icon.vue.cjs");
const _hoisted_1 = { class: "me-pick-picker" };
const _hoisted_2 = {
  key: 0,
  class: "me-pick-overflow"
};
const _hoisted_3 = { class: "me-pick-item" };
const _hoisted_4 = { class: "me-pick-item-text" };
const _hoisted_5 = ["onClick"];
const _hoisted_6 = { class: "me-pick-overflow-item" };
const _hoisted_7 = ["value"];
const _hoisted_8 = { class: "me-pick-search" };
const _hoisted_9 = ["value"];
const _hoisted_10 = { class: "me-pick-placeholder-text" };
const _hoisted_11 = { class: "me-pick-icon" };
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  ...{
    name: "me-tree-pick"
  },
  __name: "tree-pick",
  props: {
    treeProps: { default() {
      return {
        checkStrictly: true
      };
    } },
    treeEvents: { default() {
      return {};
    } },
    showList: { type: Boolean, default: false },
    placeholder: { default: "请选择" },
    multiple: { type: Boolean, default: false },
    allowClear: { type: Boolean, default: true },
    value: { default: void 0 }
  },
  emits: ["dropdownVisibleChange", "select", "change", "update:value"],
  setup(__props, { expose: __expose, emit: __emit }) {
    const emits = __emit;
    const props = __props;
    const inputWidth = vue.ref(4);
    const showPopup = vue.ref(false);
    const keyword = vue.ref("");
    const isComposing = vue.ref(false);
    const allowPlaceholder = vue.ref(true);
    const selectedNodeList = vue.ref([]);
    const isFocused = vue.ref(false);
    const showDownIcon = vue.ref(false);
    const showSearchIcon = vue.ref(false);
    const showClearIcon = vue.ref(false);
    const selectedKeys = vue.ref([]);
    const checkedKeys = vue.ref([]);
    const prevSelectedNodeList = vue.ref([]);
    const isSearching = vue.ref(false);
    const treeList = vue.ref([]);
    let cloneTreeList = [];
    const expandedKeyList = vue.ref([]);
    const arrayList = vue.ref([]);
    const inputRef = vue.ref();
    vue.watch(showPopup, (newVal) => {
      const { treeProps } = props;
      if (newVal) {
        treeList.value = JSON.parse(JSON.stringify(treeProps.treeData));
        cloneTreeList = JSON.parse(JSON.stringify(treeProps.treeData));
        isSearching.value = false;
      }
      ;
      if (!newVal) {
        keyword.value = "";
        selectedNodeList.value = JSON.parse(JSON.stringify(prevSelectedNodeList.value));
      }
      isFocused.value = newVal;
      emits("dropdownVisibleChange", newVal);
    });
    vue.watch([showPopup, keyword, selectedNodeList], () => {
      showDownIcon.value = !showPopup.value && !keyword.value.length;
      showSearchIcon.value = showPopup.value && keyword.value.length == 0;
      showClearIcon.value = keyword.value.length > 0 || selectedNodeList.value.length > 0;
      if (showClearIcon.value) {
        if (showPopup.value) {
          showDownIcon.value = false;
          showSearchIcon.value = false;
        } else {
          showDownIcon.value = true;
          showSearchIcon.value = false;
          showClearIcon.value = false;
        }
      }
    }, { immediate: true });
    const showPlaceholder = vue.computed(() => {
      return !keyword.value.length && allowPlaceholder.value;
    });
    const clickWrap = () => {
      inputRef.value && inputRef.value.focus();
    };
    const onChange = lodashEs.debounce(() => {
      if (!keyword.value.trim()) {
        resetTree();
      } else {
        queryTree(keyword.value);
      }
    }, 200);
    const resetTree = () => {
      treeList.value = lodashEs.cloneDeep(cloneTreeList);
      expandedKeyList.value = [];
      isSearching.value = false;
      keyword.value = "";
    };
    const onCompositionstart = (evt) => {
      isComposing.value = true;
      allowPlaceholder.value = false;
      showPopup.value = true;
      if (!props.multiple) {
        selectedNodeList.value = [];
      }
    };
    const onCompositionupdate = (evt) => {
      setInputWidth(evt.target);
    };
    const onCompositionend = (evt) => {
      if (isComposing.value) {
        keyword.value = evt.target.value;
        onChange();
        setInputWidth(evt.target);
      }
      isComposing.value = false;
      allowPlaceholder.value = true;
    };
    const setInputWidth = (target) => {
      const span = document.createElement("span");
      span.innerText = target.value;
      document.body.appendChild(span);
      inputWidth.value = parseInt(span.getBoundingClientRect().width + "") + 20;
      document.body.removeChild(span);
    };
    const onInput = (evt) => {
      const { multiple } = props;
      if (!isComposing.value) {
        showPopup.value = true;
        keyword.value = evt.target.value;
        if (!multiple) {
          selectedNodeList.value = !evt.target.value ? JSON.parse(JSON.stringify(prevSelectedNodeList.value)) : [];
        }
        onChange();
        setInputWidth(evt.target);
      }
    };
    const onClear = () => {
      keyword.value = "";
      selectedNodeList.value = [];
      selectedKeys.value = [];
      checkedKeys.value = [];
      prevSelectedNodeList.value = [];
    };
    const onSelectTreeNode = (keys2, evt) => {
      const { treeProps: { checkable } } = props;
      if (checkable) {
        const parent = evt.nativeEvent.currentTarget.parentNode;
        const node = parent.querySelector(".ant-tree-checkbox");
        node && node.click();
        selectedKeys.value = [];
        return;
      }
      selectedNodeList.value = evt.selectedNodes;
      prevSelectedNodeList.value = JSON.parse(JSON.stringify(selectedNodeList.value));
      if (!props.multiple) {
        showPopup.value = false;
      } else {
        inputRef.value.focus();
      }
      vue.nextTick(() => {
        showDownIcon.value = true;
        showClearIcon.value = false;
        showSearchIcon.value = false;
      });
      emits("select", selectedNodeList.value);
      const keyList = selectedNodeList.value.reduce((list, item) => {
        list.push(item.key);
        return list;
      }, []);
      emits("update:value", keyList);
    };
    const onCheckTreeNode = (keys2, evt) => {
      const { treeProps: { checkStrictly } } = props;
      selectedNodeList.value = evt.checkedNodes;
      if (checkStrictly) {
        checkedKeys.value = keys2.checked;
      } else {
        checkedKeys.value = keys2;
      }
      prevSelectedNodeList.value = JSON.parse(JSON.stringify(selectedNodeList.value));
      if (!props.multiple) {
        showPopup.value = false;
      } else {
        inputRef.value.focus();
      }
      vue.nextTick(() => {
        showDownIcon.value = true;
        showClearIcon.value = false;
        showSearchIcon.value = false;
      });
      const keyList = selectedNodeList.value.reduce((list, item) => {
        list.push(item.key);
        return list;
      }, []);
      emits("update:value", keyList);
      emits("select", selectedNodeList.value);
    };
    const onMouseenter = () => {
      showClearIcon.value = selectedNodeList.value.length > 0;
      showDownIcon.value = showClearIcon.value ? false : true;
      showSearchIcon.value = false;
    };
    const onMouseleave = () => {
      showDownIcon.value = true;
      showClearIcon.value = false;
      showSearchIcon.value = false;
    };
    const queryTree = (keyword2) => {
      isSearching.value = true;
      const { showList } = props;
      if (!showList) {
        treeList.value = tree.fuzzyQueryTree(cloneTreeList, keyword2);
        if (treeList.value.length > 0) {
          addExpandKeys(treeList.value);
        }
      } else {
        arrayList.value = tree.getFuzzyPathByKey(keyword2, cloneTreeList, { keyProp: "title" });
      }
    };
    const addExpandKeys = (list) => {
      expandedKeyList.value = [];
      const go = (list2) => {
        list2 == null ? void 0 : list2.forEach((item) => {
          if (item.children && item.children.length > 0) {
            expandedKeyList.value.push(item.key);
            go(item.children);
          }
        });
      };
      go(list);
    };
    const onClickNode = (node) => {
      let keys2 = [];
      if (props.multiple) {
        selectedNodeList.value = [];
        prevSelectedNodeList.value = [];
        selectedKeys.value = [];
        node.forEach((item) => {
          const currentNode = tree.getNodeByKey(item.node.key, treeList.value);
          selectedNodeList.value.push(currentNode);
          prevSelectedNodeList.value.push(currentNode);
          selectedKeys.value.push(currentNode.key);
          if (props.treeProps.checkable) {
            checkedKeys.value.push(currentNode.key);
          }
        });
        emits("select", selectedNodeList.value);
        keys2 = selectedNodeList.value.reduce((list, item) => {
          list.push(item.key);
          return list;
        }, []);
        if (props.treeProps.checkable) {
          checkedKeys.value = keys2;
        } else {
          selectedKeys.value = keys2;
        }
      } else {
        const currentNode = tree.getNodeByKey(node.node.key, treeList.value);
        selectedNodeList.value = currentNode ? [currentNode] : [];
        prevSelectedNodeList.value = JSON.parse(JSON.stringify(selectedNodeList.value));
        keyword.value = "";
        showPopup.value = false;
        if (props.treeProps.checkable) {
          checkedKeys.value = [node.node.key];
        } else {
          selectedKeys.value = [node.node.key];
        }
        keys2 = [node.node.key];
        emits("select", [vue.toRaw(node)]);
      }
      emits("update:value", keys2);
    };
    const handleKeydown = (evt) => {
      const { treeProps: { checkStrictly, checkable } } = props;
      if (evt.key.toLocaleLowerCase() === "backspace" && !isComposing.value) {
        if (keyword.value.trim() === "") {
          const deleteNodes = selectedNodeList.value.splice(selectedNodeList.value.length - 1, 1);
          const deleteNode = deleteNodes[0] ? deleteNodes[0] : null;
          prevSelectedNodeList.value.splice(prevSelectedNodeList.value.length - 1, 1);
          selectedKeys.value.splice(selectedKeys.value.length - 1, 1);
          checkedKeys.value.splice(checkedKeys.value.length - 1, 1);
          if (deleteNode && !checkStrictly && checkable) {
            const paths = tree.getFuzzyPathByKey(deleteNode.title, cloneTreeList, { keyProp: "title" });
            if (paths && paths.length > 0) {
              const pathList = paths[0].path;
              for (let i = 0; i < pathList.length; i++) {
                const path = pathList[i];
                if (path === deleteNode.title) {
                  break;
                }
                let node = null;
                selectedNodeList.value.map((item) => {
                  if (item.title === path) {
                    node = item;
                  }
                });
                selectedNodeList.value = selectedNodeList.value.filter((item) => {
                  return item.title !== path;
                });
                prevSelectedNodeList.value = selectedNodeList.value.filter((item) => item.title !== path);
                if (node) {
                  selectedKeys.value = selectedKeys.value.filter((key) => key !== node.key);
                  checkedKeys.value = checkedKeys.value.filter((key) => key !== node.key);
                }
              }
            }
          }
          emits("change", selectedNodeList.value);
          const keys2 = selectedNodeList.value.reduce((list, item) => {
            list.push(item.key);
            return list;
          }, []);
          emits("update:value", keys2);
        }
      }
    };
    const onRemove = (item) => {
      selectedNodeList.value = selectedNodeList.value.filter((data) => data.key !== item.key);
      prevSelectedNodeList.value = prevSelectedNodeList.value.filter((data) => data.key !== item.key);
      selectedKeys.value = selectedKeys.value.filter((key) => key !== item.key);
      checkedKeys.value = checkedKeys.value.filter((key) => key !== item.key);
      showPopup.value = true;
      const keys2 = selectedNodeList.value.reduce((list, item2) => {
        list.push(item2.key);
        return list;
      }, []);
      emits("update:value", keys2);
      emits("change", selectedNodeList.value);
    };
    vue.onMounted(() => {
      window.addEventListener("keydown", handleKeydown);
      if (props.value) {
        const cloneTreeList2 = JSON.parse(JSON.stringify(props.treeProps.treeData));
        const defaultValue = typeof props.value === "string" ? [props.value] : props.value;
        defaultValue.map((key) => {
          const node = tree.getNodeByKey(key, cloneTreeList2);
          selectedNodeList.value.push(node);
          if (props.treeProps.checkable) {
            checkedKeys.value.push(node.key);
          } else {
            selectedKeys.value.push(node.key);
          }
        });
        prevSelectedNodeList.value = JSON.parse(JSON.stringify(selectedNodeList.value));
      }
    });
    vue.onBeforeUnmount(() => {
      window.addEventListener("keydown", handleKeydown);
    });
    __expose({
      delete(item) {
        onRemove(item);
      }
    });
    return (_ctx, _cache) => {
      return vue.openBlock(), vue.createElementBlock("div", {
        class: vue.normalizeClass(["me-pick", { "me-pick-single": !_ctx.multiple, "me-pick-multiple": _ctx.multiple, "me-pick-focused": isFocused.value, "me-pick-open": showPopup.value }]),
        onClick: clickWrap
      }, [
        vue.createVNode(vue.unref(antDesignVue.Dropdown), {
          overlayClassName: "me-pick-dropdown",
          visible: showPopup.value,
          "onUpdate:visible": _cache[6] || (_cache[6] = ($event) => showPopup.value = $event),
          trigger: "click"
        }, {
          overlay: vue.withCtx(() => [
            vue.createElementVNode("div", {
              class: vue.normalizeClass(["me-pick-dropdown-content", { "me-pick-show-list": _ctx.showList && isSearching.value }])
            }, [
              _ctx.showList ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
                treeList.value.length > 0 && !isSearching.value ? (vue.openBlock(), vue.createBlock(vue.unref(antDesignVue.Tree), vue.mergeProps({ key: 0 }, {
                  ..._ctx.treeProps,
                  multiple: _ctx.multiple,
                  treeData: treeList.value
                }, {
                  "expanded-keys": expandedKeyList.value,
                  "onUpdate:expandedKeys": _cache[0] || (_cache[0] = ($event) => expandedKeyList.value = $event),
                  "selected-keys": selectedKeys.value,
                  "onUpdate:selectedKeys": _cache[1] || (_cache[1] = ($event) => selectedKeys.value = $event),
                  "checked-keys": checkedKeys.value,
                  "onUpdate:checkedKeys": _cache[2] || (_cache[2] = ($event) => checkedKeys.value = $event)
                }, vue.toHandlers({
                  ..._ctx.treeEvents,
                  select: onSelectTreeNode,
                  check: onCheckTreeNode
                })), null, 16, ["expanded-keys", "selected-keys", "checked-keys"])) : arrayList.value.length > 0 && isSearching.value ? (vue.openBlock(), vue.createBlock(treeList_vue_vue_type_script_setup_true_lang.default, {
                  key: 1,
                  "selected-list": selectedKeys.value,
                  multiple: _ctx.multiple,
                  onClick: onClickNode,
                  keyword: keyword.value,
                  list: arrayList.value
                }, null, 8, ["selected-list", "multiple", "keyword", "list"])) : (vue.openBlock(), vue.createBlock(vue.unref(index.Empty), { key: 2 }))
              ], 64)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
                treeList.value.length > 0 ? (vue.openBlock(), vue.createBlock(vue.unref(antDesignVue.Tree), vue.mergeProps({ key: 0 }, {
                  ..._ctx.treeProps,
                  multiple: _ctx.multiple,
                  treeData: treeList.value
                }, {
                  "expanded-keys": expandedKeyList.value,
                  "onUpdate:expandedKeys": _cache[3] || (_cache[3] = ($event) => expandedKeyList.value = $event),
                  "selected-keys": selectedKeys.value,
                  "onUpdate:selectedKeys": _cache[4] || (_cache[4] = ($event) => selectedKeys.value = $event),
                  "checked-keys": checkedKeys.value,
                  "onUpdate:checkedKeys": _cache[5] || (_cache[5] = ($event) => checkedKeys.value = $event)
                }, vue.toHandlers({
                  ..._ctx.treeEvents,
                  select: onSelectTreeNode,
                  check: onCheckTreeNode
                })), null, 16, ["expanded-keys", "selected-keys", "checked-keys"])) : (vue.openBlock(), vue.createBlock(vue.unref(index.Empty), { key: 1 }))
              ], 64))
            ], 2)
          ]),
          default: vue.withCtx(() => [
            vue.createElementVNode("div", {
              onMouseenter,
              onMouseleave,
              class: "me-pick-content"
            }, [
              vue.createElementVNode("div", _hoisted_1, [
                _ctx.multiple ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
                  vue.renderSlot(_ctx.$slots, "tag", { tags: selectedNodeList.value }, () => [
                    (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(selectedNodeList.value, (item) => {
                      return vue.openBlock(), vue.createElementBlock("div", {
                        class: "me-pick-overflow-item",
                        key: item.key
                      }, [
                        vue.createElementVNode("span", _hoisted_3, [
                          vue.createElementVNode("span", _hoisted_4, vue.toDisplayString(item.title), 1),
                          vue.createElementVNode("span", {
                            onClick: vue.withModifiers(($event) => onRemove(item), ["stop"]),
                            class: "me-pick-close-btn"
                          }, [
                            vue.createVNode(vue.unref(closeIcon.default))
                          ], 8, _hoisted_5)
                        ])
                      ]);
                    }), 128))
                  ]),
                  vue.createElementVNode("div", _hoisted_6, [
                    vue.createElementVNode("div", {
                      class: "me-pick-search",
                      style: vue.normalizeStyle({ width: inputWidth.value + "px" })
                    }, [
                      vue.createElementVNode("input", {
                        ref_key: "inputRef",
                        ref: inputRef,
                        value: keyword.value,
                        onCompositionstart,
                        onCompositionupdate,
                        onCompositionend,
                        onInput,
                        type: "search",
                        class: "me-pick-search-input"
                      }, null, 40, _hoisted_7)
                    ], 4)
                  ])
                ])) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
                  vue.createElementVNode("div", _hoisted_8, [
                    vue.createElementVNode("input", {
                      value: keyword.value,
                      onCompositionstart,
                      onCompositionend,
                      onInput,
                      type: "search",
                      class: "me-pick-search-input"
                    }, null, 40, _hoisted_9)
                  ]),
                  selectedNodeList.value.length > 0 ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 0 }, vue.renderList(selectedNodeList.value, (item) => {
                    return vue.openBlock(), vue.createElementBlock("div", {
                      class: "me-pick-item",
                      key: item.key
                    }, vue.toDisplayString(item.title), 1);
                  }), 128)) : vue.createCommentVNode("", true)
                ], 64)),
                selectedNodeList.value.length === 0 ? (vue.openBlock(), vue.createElementBlock("div", {
                  key: 2,
                  class: "me-pick-placeholder",
                  style: vue.normalizeStyle({ visibility: showPlaceholder.value ? "visible" : "hidden" })
                }, [
                  vue.renderSlot(_ctx.$slots, "placeholder", {}, () => [
                    vue.createElementVNode("span", _hoisted_10, vue.toDisplayString(_ctx.placeholder), 1)
                  ])
                ], 4)) : vue.createCommentVNode("", true)
              ]),
              vue.createElementVNode("span", _hoisted_11, [
                showDownIcon.value ? (vue.openBlock(), vue.createBlock(vue.unref(downIcon.default), {
                  key: 0,
                  class: "me-pick-suffix"
                })) : vue.createCommentVNode("", true),
                showSearchIcon.value ? (vue.openBlock(), vue.createBlock(vue.unref(searchIcon.default), {
                  key: 1,
                  class: "me-pick-suffix"
                })) : vue.createCommentVNode("", true),
                showClearIcon.value ? (vue.openBlock(), vue.createBlock(vue.unref(closeCircleFilledIcon.default), {
                  key: 2,
                  onClick: vue.withModifiers(onClear, ["stop"]),
                  class: "me-pick-suffix"
                })) : vue.createCommentVNode("", true)
              ])
            ], 32)
          ]),
          _: 3
        }, 8, ["visible"])
      ], 2);
    };
  }
});
exports.default = _sfc_main;
//# sourceMappingURL=tree-pick.vue2.cjs.map
